<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关系选择器</title>
    <style>
        /* 后代选择器 */
        #ul2 li{
            border-bottom: 2px solid black;
        }

        /* 子代选择器 */
        #ul1>li{
            border-bottom: 2px solid black;
        }

        /* 相邻选择器 */
        #div2+p{
            color: red;
        }
        /* 兄弟选择器 */
        #div2~p{
            color: red;
        }
    </style>
</head>
<body>
    <ul id="ul1">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>
            <ul>
                <li>子代1</li>
                <li>子代2</li>
                <li>子代3</li>
                <li>子代4</li>
                <li>子代5</li>
            </ul>
        </li>
    </ul>
    <ul id="ul2">
        <li>01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>
            <ul>
                <li>后代1</li>
                <li>后代2</li>
                <li>后代3</li>
                <li>后代4</li>
                <li>后代5</li>
            </ul>
        </li>
    </ul>

    <div id="div1">
        <p>Lorem ipsum dolor sit.</p>
        <div id="div2">div2</div>
    </div>
 
</body>
</html>